<!doctype html>
<html lang="ch">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="左右结构项目，属于大人员的社交工具">
    <meta name="keywords" content="左右结构项目 社交 占座 ">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>Bootstrap左右结构响应式后台管理模板</title>
    <script src="./lib/js/jquery.min.js"></script>
    <script src="./lib/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $(".meun-item").click(function () {
                $(".meun-item").removeClass("meun-item-active");
                $(this).addClass("meun-item-active");
                var itmeObj = $(".meun-item").find("img");
                itmeObj.each(function () {
                    var items = $(this).attr("src");
                    items = items.replace("_grey.png", ".png");
                    items = items.replace(".png", "_grey.png")
                    $(this).attr("src", items);
                });
                var attrObj = $(this).find("img").attr("src");
                ;
                attrObj = attrObj.replace("_grey.png", ".png");
                $(this).find("img").attr("src", attrObj);
            });
            $("#topAD").click(function () {
                $("#topA").toggleClass(" glyphicon-triangle-right");
                $("#topA").toggleClass(" glyphicon-triangle-bottom");
            });
            $("#topBD").click(function () {
                $("#topB").toggleClass(" glyphicon-triangle-right");
                $("#topB").toggleClass(" glyphicon-triangle-bottom");
            });
            $("#topCD").click(function () {
                $("#topC").toggleClass(" glyphicon-triangle-right");
                $("#topC").toggleClass(" glyphicon-triangle-bottom");
            });
            $(".toggle-btn").click(function () {
                $("#leftMeun").toggleClass("show");
                $("#rightContent").toggleClass("pd0px");
            })
        })
    </script>
    <!--[if lt IE 9]>
  <script src="./lib/js/html5shiv.min.js"></script>
  <script src="./lib/js/respond.min.js"></script>
<![endif]-->
    <link href="./lib/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./lib/css/common.css" />
    <link rel="stylesheet" type="text/css" href="./lib/css/slide.css" />
    <link rel="stylesheet" type="text/css" href="./lib/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./lib/css/flat-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="./lib/css/jquery.nouislider.css">
    <link rel="stylesheet" href="./lib/css/bootstrapValidator.css">
</head>

<body>

    <!-- 删除----动态渲染模态框 -->
    <div id="del">

    </div>
    <div id="wrap">
        <!-- 左侧菜单栏目块 -->
        <div class="leftMeun" id="leftMeun">
            <div id="logoDiv">
                <p id="logoP"><img id="logo" alt="左右结构项目" src="./lib/images/logo.png"><span>左右结构项目</span></p>
            </div>
            <div id="personInfor">
                <p id="userName">王信强</p>
                <p><span>wxq@qq.com</span></p>
                <p>
                    <a>退出登录</a>
                </p>
            </div>
            <div class="meun-title">账号管理</div>
            <div class="meun-item" href="#user" aria-controls="user" role="tab" data-toggle="tab"><img
                    src="./lib/images/icon_user_grey.png">用户管理</div>
        </div>
        <!-- 右侧具体内容栏目 -->
        <div id="rightContent">
            <a class="toggle-btn" id="nimei">
                <i class="glyphicon glyphicon-align-justify"></i>
            </a>
            <!-- Tab panes -->
            <div class="tab-content">
                <!-- 资源管理模块 -->
                <div role="tabpanel" class="tab-pane active" id="sour">

                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
                                编码
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                名称
                            </div>
                            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                链接
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                操作
                            </div>
                        </div>

                    </div>
                    <!--页码块-->

                </div>
                <!-- 权限管理模块 -->
                <div role="tabpanel" class="tab-pane" id="char">

                    <div class="check-div">
                        <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addChar">添加权限</button>
                    </div>
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-1 ">
                                编码
                            </div>
                            <div class="col-xs-4">
                                权限名
                            </div>
                            <div class="col-xs-5">
                                描述
                            </div>
                            <div class="col-xs-2">
                                操作
                            </div>
                        </div>
                        <div class="tablebody">
                            <div class="row">
                                <div class="col-xs-1 ">
                                    1
                                </div>
                                <div class="col-xs-4">
                                    </span><span>管理员</span>
                                </div>
                                <div class="col-xs-5">
                                    管理员具有超年权限
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-success btn-xs" data-toggle="modal"
                                        data-target="#changeChar">修改</button>
                                    <button class="btn btn-danger btn-xs" data-toggle="modal"
                                        data-target="#deleteChar">删除</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-1 ">
                                    2
                                </div>
                                <div class="col-xs-4">
                                    <span>游客</span>
                                </div>
                                <div class="col-xs-5">
                                    可以查看信息
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-success btn-xs">修改</button>
                                    <button class="btn btn-danger btn-xs">删除</button>
                                </div>
                            </div>

                        </div>

                    </div>
                    <!--页码块-->

                </div>
                <!--用户管理模块-->
                <div role="tabpanel" class="tab-pane" id="user">
                    <div class="check-div form-inline">
                        <div class="col-xs-3">
                            <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addUser">添加用户
                            </button>
                        </div>
                        <div class="col-xs-4">
                            <input type="text" class="form-control input-sm" placeholder="输入用户名搜索"
                                id="user-search-text">
                            <button class="btn btn-white btn-xs " id="submit-search">查 询 </button>
                        </div>
                        <div class="col-lg-3 col-lg-offset-2 col-xs-4" style=" padding-right: 40px;text-align: right;">
                            <label for="paixu">排序:&nbsp;</label>
                            <select class=" form-control">
                                <option>地区</option>
                                <option>地区</option>
                                <option>班期</option>
                                <option>性别</option>
                                <option>年龄</option>
                                <option>份数</option>
                            </select>
                        </div>
                    </div>
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-2 ">
                                用户名
                            </div>
                            <div class="col-xs-2">
                                地区
                            </div>
                            <div class="col-xs-2">
                                真实姓名
                            </div>
                            <div class="col-xs-2">
                                电话
                            </div>
                            <div class="col-xs-2">
                                状态
                            </div>
                            <div class="col-xs-2">
                                操作
                            </div>
                        </div>
                        <div class="tablebody">


                        </div>

                    </div>
                    <!--页码块-->
                    <footer class="footer">
                        <ul class="pagination">
                            <li>
                                <select>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                    <option>7</option>
                                    <option>8</option>
                                    <option>9</option>
                                    <option>10</option>
                                </select>
                                页
                            </li>
                            <li class="gray">
                                共20页
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-menu-left">
                                </i>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-menu-right">
                                </i>
                            </li>
                        </ul>
                    </footer>

                    <!--弹出添加用户窗口-->
                    <div class="modal fade" id="addUser" role="dialog" aria-labelledby="gridSystemModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="gridSystemModalLabel">添加用户</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="container-fluid">
                                        <form class="form-horizontal">
                                            <div class="form-group ">
                                                <label for="sName" class="col-xs-3 control-label">用户名：</label>
                                                <div class="col-xs-8 ">
                                                    <input type="email" class="form-control input-sm duiqi" id="sName"
                                                        placeholder="" name="username">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sLink" class="col-xs-3 control-label">真实姓名：</label>
                                                <div class="col-xs-8 ">
                                                    <input type="" class="form-control input-sm duiqi" id="sLink"
                                                        placeholder="" name="realname">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sOrd" class="col-xs-3 control-label">电子邮箱：</label>
                                                <div class="col-xs-8">
                                                    <input type="" class="form-control input-sm duiqi" id="sOrd"
                                                        placeholder="" name="email">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sKnot" class="col-xs-3 control-label">电话：</label>
                                                <div class="col-xs-8">
                                                    <input type="" class="form-control input-sm duiqi" id="sKnot"
                                                        placeholder="" name="phone">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sKnot" class="col-xs-3 control-label">地区：</label>
                                                <div class="col-xs-8">
                                                    <select class=" form-control select-duiqi" name="useraddress">
                                                        <option value="国际关系地区">国际关系地区</option>
                                                        <option value="北京大学">北京大学</option>
                                                        <option value="天津大学">天津大学</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sKnot" class="col-xs-3 control-label">权限：</label>
                                                <div class="col-xs-8">
                                                    <select class=" form-control select-duiqi" name="jurisdiction">
                                                        <option value="管理员">管理员</option>
                                                        <option value="普通用户">普通用户</option>
                                                        <option value="游客">游客</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="situation" class="col-xs-3 control-label">状态：</label>
                                                <div class="col-xs-8">
                                                    <label class="control-label" for="anniu">
                                                        <input type="radio" name="userstate" id="normal" value="active"
                                                            checked>正常</label>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <label class="control-label" for="meun">
                                                        <input type="radio" name="userstate" id="forbid"
                                                            value="disable"> 禁用</label>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                    <button type="submit" class="btn btn-xs btn-green" name="submit">确认</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!--弹出修改用户窗口-->
                    <div class="modal fade" id="reviseUser" role="dialog" aria-labelledby="gridSystemModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="gridSystemModalLabel">修改用户</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="container-fluid">
                                        <form class="form-horizontal">
                                            <div class="form-group ">
                                                <label for="sName" class="col-xs-3 control-label">用户名：</label>
                                                <div class="col-xs-8 ">
                                                    <input type="email" class="form-control input-sm duiqi" id="sName"
                                                        placeholder="">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sLink" class="col-xs-3 control-label">真实姓名：</label>
                                                <div class="col-xs-8 ">
                                                    <input type="" class="form-control input-sm duiqi" id="sLink"
                                                        placeholder="">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sOrd" class="col-xs-3 control-label">电子邮箱：</label>
                                                <div class="col-xs-8">
                                                    <input type="" class="form-control input-sm duiqi" id="sOrd"
                                                        placeholder="">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sKnot" class="col-xs-3 control-label">电话：</label>
                                                <div class="col-xs-8">
                                                    <input type="" class="form-control input-sm duiqi" id="sKnot"
                                                        placeholder="">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sKnot" class="col-xs-3 control-label">地区：</label>
                                                <div class="col-xs-8">
                                                    <input type="" class="form-control input-sm duiqi" id="sKnot"
                                                        placeholder="">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="sKnot" class="col-xs-3 control-label">权限：</label>
                                                <div class="col-xs-8">
                                                    <input type="" class="form-control input-sm duiqi" id="sKnot"
                                                        placeholder="">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="situation" class="col-xs-3 control-label">状态：</label>
                                                <div class="col-xs-8">
                                                    <label class="control-label" for="anniu">
                                                        <input type="radio" name="situation" id="normal">正常</label>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <label class="control-label" for="meun">
                                                        <input type="radio" name="situation" id="forbid"> 禁用</label>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                    <button type="button" class="btn btn-xs btn-green">确 认</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                </div>

            </div>
        </div>
    </div>
    <script id="findDelete" type="text/html">
            <div class="modal fade" id = "deleteUser" role = "dialog" aria - labelledby="gridSystemModalLabel" >
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                        </div>
                        <div class="modal-body">
                            <div class="container-fluid">
                                确定要删除该用户？删除后不可恢复！
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                            <button type="button" data-id="<%= list.id %>" class="btn  btn-xs btn-danger" id="submit-del">确认</button>
                        </div>
                    </div>
                </div>
            </div >
    </script>

    <script id="findUser" type="text/html">
        <% for(var i = 0; i < list.length; i++) { %>
        <div class="row">
                            <div class="col-xs-2 ">
                                <%= list[i].username %>
                            </div>
                            <div class="col-xs-2">
                                <%= list[i].useraddress %>
                            </div>
                            <div class="col-xs-2">
                                <%= list[i].realname %>
                            </div>
                            <div class="col-xs-2">
                                <%= list[i].phone %>
                            </div>
                            <div class="col-xs-2">
                                <% if(list[i].userstate == 'active') { %>
                                    激活
                                <% } else {%>
                                    未激活
                                <% } %>
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-success btn-xs" data-id="<%= list[i].id%>" data-toggle="modal" data-target="#reviseUser">修改</button>
                                <button class="btn btn-danger btn-xs showDel" data-id="<%= list[i].id%>"  data-toggle="modal" data-target="#deleteUser">删除</button>
                            </div>
                        </div>
        <% } %>
    </script>
    <!-- 渲染引擎 -->
    <script src="./lib/js/template-web.js"></script>
    <!-- 表单验证插件引入 -->
    <script src="./lib/js/bootstrapValidator.js"></script>
    <script>
        // 1.显示
        var showUser = function () {
            $.ajax({
                type: 'get',
                url: '/userFind',
                data: null,
                success: function (data) {
                    // console.log(document.querySelector('#findUser').innerHTML);
                    // console.log(templateCode);
                    var templateCode = template('findUser', { list: data });
                    $('#rightContent .tablebody').html(templateCode);
                }
            });
        }
        showUser();
        // 2.添加
        $('#addUser .btn-green').click(function () {
            $.post('/addUser', $('#addUser form').serialize(), function (data) {
                if (data.code == '200') {
                    // 提示信息
                    alert(data.msg);
                    // 隐藏模态框
                    $('#addUser').modal('hide');
                    // 刷新显示列表
                    showUser();
                } else {
                    alert('添加失败');
                    return false;
                }
            })
        })
        // 3.删除
        // 渲染模态框数据请求--------将删除按钮的事件委托在用户管理模块#user
        $('#user').on('click', '.showDel', function () {
            $.get('/showDel', $(this).data(), function (data) {
                // 判断是否存在data对象，如果存在是真值为true
                if (data) {
                    // 生成HTML代码
                    let html = template('findDelete', { list: data });
                    // 插入
                    $('#del').html(html);
                    // 显示模态框
                    $('#deleteUser').modal('show');
                } else {
                    alert('删除失败');
                    return 0;
                }
            })
        })
        // 当模态框被关闭时，清空上次渲染的删除模态框，等待下次渲染
        $('#del').on('hidden.bs.modal', '#deleteUser', function () {
            $('#del').empty();
        })
        $('#del').on('click', '#submit-del', function () {
            $.ajax({
                type: 'get',
                url: '/submitDel',
                data: $(this).data(),
                success: function (data) {
                    if (data.code === '200') {
                        // 删除成功
                        alert(data.msg);
                        // 刷新
                        showUser();
                        // 隐藏模态框
                        $('#deleteUser').modal('hide');
                    } else {
                        alert('删除失败！！！');
                        return 0;
                    }
                }
            })
        })
        // 模糊搜索select 选项[all,distinct] 字段... from 表名 wheere 字段 like '%内容%';
        $('#submit-search').click(function () {
            $.ajax({
                type: 'get',
                url: '/search',
                data: { text: $('#user-search-text').val() },
                success: function (data) {
                    var templateCode = template('findUser', { list: data });
                    $('#rightContent .tablebody').html(templateCode);
                }
            })
        })
    </script>
</body>

</html>